<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- v-hasPermi="['system:user:add']" -->
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete">删除
                </el-button>
            </el-col>
            <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>
        <el-table :data="kefuList" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="手机号" align="center" prop="tel" />
            <el-table-column label="新增时间" align="center" prop="createTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="微信号" align="center" prop="wechat" />
            <el-table-column label="微信二维码" align="center" prop="pic">
                <template slot-scope="scope">
                    <el-image :src="scope.row.pic" alt="" weight="20" style="width: 80px;" :preview-src-list="srcList"
                        @click="look(scope.row)"></el-image>
                </template>
            </el-table-column>
            <!-- 1--是 0--否 -->
            <el-table-column label="是否为当前客服" align="center" prop="type">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">是</span>
                    <span v-if="scope.row.type == 0">否</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" v-if="scope.row.type==0" icon="el-icon-edit" @click="dangqiankefu(scope.row)">设为当前客服
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="update(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加客服微信对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="close">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="客服姓名" prop="name" style="width:400px">
                    <el-input v-model.trim="form.name" placeholder="请输入客服姓名"  style="width:204px"/>
                </el-form-item>
                <el-form-item label="客服手机号" prop="tel">
                    <el-input maxlength="11" v-model.trim="form.tel" placeholder="请输入客服手机号" />
                </el-form-item>
                <el-form-item label="客服微信" prop="wechat" style="width:400px">
                    <el-input v-model.trim="form.wechat" placeholder="请输入客服微信号" style="width:204px" />
                </el-form-item>
                <el-form-item label="微信二维码" prop="pic">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        :on-progress="progress" name="fileName">
                        <img v-if="form.pic" :src="form.pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="isShowJinDuTiao" type="circle" :percentage="percentage" :width="78"
                            class="jdt" />
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
    </div>
</template>
<script>
import { selectOneZkwlSixSecondPC, insertOneZkwlSixSecondPC, updatekefutypes, updatekefus, selectOneZkwlSixSecond, updateZkwlSixSecondPC } from "@/api/platform/kefuwechat.js";
import { getToken } from '@/utils/auth'
export default {
    name:'kefuwechat',
    data() {
        return {
            isShowJinDuTiao: false,

            percentage: 0,

            loading1: false,
            srcList: [],
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
            kefuList: [],
            loading: true,
            title: '',
            open: false,
            form: {
                name: '',
                tel: '',
                wechat: '',
                pic: ''
            },
            date1: [],
            date2: {
                pid: ''
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            rules: {
                name: [
                    { required: true, message: "姓名不能为空", trigger: "blur" }
                ],
                tel: [{ required: true, message: "联系方式不能为空", trigger: "blur" },
                {
                    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                    message: "请输入正确的手机号码",
                    trigger: "blur"
                }],
                wechat: [{ required: true, message: "微信号不能为空", trigger: "blur" }],
                pic: [{ required: true, message: "微信二维码不能为空", trigger: "change" }]
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        close() {
            this.reset();
        },
        reset() {
            this.form = {
                name: null,
                tel: null,
                wechat: null,
                pic: null
            };
            this.$refs["form"].resetFields();
        },
        async getList() {
            let res = await selectOneZkwlSixSecondPC(this.queryParams);
            if (res.code == 200) {
                this.kefuList = res.rows;
                res.rows.forEach(item => {
                    this.srcList.push(item.pic)
                })
                this.total = res.total;
                this.loading = false;
            }
        },
        // 设为当前客服
        dangqiankefu(row) {
            this.date2.pid = row.pid;
            updatekefutypes(this.date2).then(response => {
                this.$modal.msgSuccess(response.data.msg);
                this.getList();
            })
        },
        // 新增
        handleAdd() {
            this.open = true;
            this.title = "新增客服微信"
        },
        // 确定按钮提交
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.pid != null) {
                        updateZkwlSixSecondPC(this.form).then(response => {
                            this.$modal.msgSuccess(response.data.msg);
                            this.open = false;
                            this.getList();
                            this.reset();
                        })

                    } else {
                        insertOneZkwlSixSecondPC(this.form).then(response => {
                            this.$modal.msgSuccess(response.data.msg);
                            this.open = false;
                            this.getList();
                            this.reset();
                        })
                    }
                }
            })
        },
        // 取消按钮
        cancel() {
            this.reset();
            this.open = false;
        },
        // 上传二维码
        handleAvatarSuccess(res, file) {
            this.form.pic = res.data
            this.isShowJinDuTiao = false;
            this.percentage = 0;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            this.isShowJinDuTiao = true;
        },
        progress(event, file, fileList) {
            let num = ((event.loaded / event.total) * 100) | 0;
            this.percentage = num;
        },
        // 删除
        handleDelete() {
            if (this.date1.length == 0) {
                this.$modal.msgError('请先选择要处理的信息')
            } else {

                updatekefus(this.date1).then(response => {
                    if (response.data.code == 200) {
                        this.$modal.msgSuccess(response.data.msg);
                        this.getList();
                    }
                })
            }

        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.date1 = selection.map(item => item.pid)
        },
        // 修改
        update(row) {
            this.date2.pid = row.pid;
            this.open = true;
            this.title = "修改";
            selectOneZkwlSixSecond(this.date2).then(response => {
                if (response.data.code == 200) {
                    this.form = response.data.data;
                }
            })
        },
        // 大图预览
        look(row) {
            this.srcList.push(row.pic);
        }
    }
}
</script>
<style scoped>
.jdt {
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
}

.el-form {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.el-table {
    line-height: 10px;
}

.el-image {
    width: 50px !important;
}

.avatar-uploader .el-upload {
    border: 1px solid #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    border: 1px solid #8c939d;
}

.avatar {
    width: 78px;
    height: 78px;
    display: block;
}
</style>